<template>
  <!-- 头部 定位 -->
  <div class="position">
      <span class="iconfont position__icon">&#xe636;</span>
      北京理工大学国防科技园北京理工大学国防科技园
      <span class="iconfont position__notice">&#xe600;</span>
    </div>
    <!-- 搜索 -->
    <div class="search">
      <span class="iconfont">&#xe673;</span>
      <span>山姆会员商品优惠</span>
    </div>
    <div class="banner">
      <img class="banner__img" src="../../../public/img/banner.jpg" alt="轮播图">
    </div>
    <div class="icons">
      <div class="icons__item">
        <div class="icons__item__img"></div>
        <p class="icons__item__desc">生鲜</p>
      </div>
      <div class="icons__item">
        <div class="icons__item__img"></div>
        <p class="icons__item__desc">生鲜</p>
      </div>
      <div class="icons__item">
        <div class="icons__item__img"></div>
        <p class="icons__item__desc">生鲜</p>
      </div>
      <div class="icons__item">
        <div class="icons__item__img"></div>
        <p class="icons__item__desc">生鲜</p>
      </div>
      <div class="icons__item">
        <div class="icons__item__img"></div>
        <p class="icons__item__desc">生鲜</p>
      </div>
      <div class="icons__item">
        <div class="icons__item__img"></div>
        <p class="icons__item__desc">生鲜</p>
      </div>
      <div class="icons__item">
        <div class="icons__item__img"></div>
        <p class="icons__item__desc">生鲜</p>
      </div>
      <div class="icons__item">
        <div class="icons__item__img"></div>
        <p class="icons__item__desc">生鲜</p>
      </div>
      <div class="icons__item">
        <div class="icons__item__img"></div>
        <p class="icons__item__desc">生鲜</p>
      </div>
      <div class="icons__item">
        <div class="icons__item__img"></div>
        <p class="icons__item__desc">生鲜</p>
      </div>
    </div>
    <div class="hui"></div>
</template>

<script>
export default {
  name: 'StaticPart'
}
</script>

<style lang="scss" scoped>
@import '../../style/mixins.scss';
@import '../../style/viriales.scss';
.position {
    position: relative;
    padding: .16rem .42rem .16rem .18rem;
    line-height: .22rem;
    font-size: .16rem;
    // background: $content-fontcolor;
    @include ellipsis;
    .position__icon {
      position: relative;
      top:.01rem;
      font-size: .2rem;
    }
    .position__notice {
      position: absolute;
      top: .17rem;
      right: .18rem;
      font-size: .2rem;
    }
  }
  .search {
    line-height: .32rem;
    background-color: #f5f5f5;
    color: #b7b7b7;
    border-radius: .16rem;
    font-size: .14rem;
    margin: 0 .18rem .15rem .18rem;
    .iconfont {
      display: inline-block;
      font-size: .2rem;
      padding: 0 .12rem 0 .16rem;
      vertical-align: middle;
    }
  }
  .banner {
    height: 0;
    overflow: hidden;
    margin: 0 .18rem;
    background-color: teal;
    padding-bottom: 60%;
    border-radius: .2rem;
    &__img {
      width: 100%;
    }
  }
  .icons {
    display: flex;
    flex-wrap: wrap;
    padding: .1rem .18rem;
    &__item {
      width: 20%;
      &__img {
        width: .4rem;
        height: .4rem;
        background-color: $content-fontcolor;
        border-radius: 50%;
        margin: 0 auto;
        margin-top: .1rem;
      }
      &__desc {
        padding: .06rem 0 ;
        margin: 0;
        text-align: center;
        font-size: .15rem;
        color: #333;
      }
    }
  }
  .hui {
    height: .1rem;
    background-color: #f3f3f3;
  }
</style>
